var pageLimit = 10;
var sort = 'time';
var classId = '';

$(document).ready(function () {
    var params = getParams();
    if (params.cid) {
        getClassData(params.cid);
    }
    $("#class_" + params.cid).click();
    $("#input-limit").change(function () {
        pageLimit = $(this).val();
        console.dir(pageLimit);
        contractPage(classId, 1);
    });
    $("#input-sort").change(function () {
        sort = $(this).val();
        console.dir(sort);
        contractPage(classId, 1);
    });
});

$(".list-group-item").click(function () {
    $(this).parent().parent().show();
    var nextUl = $(this).next("ul");
    nextUl.show();
    $(".list-group-item").removeClass("active");
    $(this).addClass("active");
    $(this).parent().parent().prev("a").addClass("active");
});

function contractPage(class_id, pageNum) {
    let params = {class_id: class_id}
    $.ajax({
        url: '/api/search/class',
        type: 'get',
        data: {page: pageNum, limit: pageLimit, class_id: class_id, order: sort},
        async: false,
        dataType: 'json',
        success: function (r) {
            if (r.code == 200) {
                var htmlStr = '';
                if (r.data.count > 0) {
                    $app.pager('pagination', 'contractPage', params, pageNum, r.data.count, pageLimit);
                    for (var i in r.data.data) {
                        htmlStr += `<div class="col single-column">
                        <div class="card product-card border-0">
                            <div class="image">
                                <a href="/detail/${r.data.data[i].id}.html" target="_blank"><img src="https://cdn.mihetong.com/${r.data.data[i].title_pic}" class="card-img-top"
                                  alt="${r.data.data[i].title}"></a>
                            </div>
                        </div>
                    </div>`;
                    }
                    $(".pagination-main").show();
                } else {
                    htmlStr = '<div style="margin:auto"><center><img src="/static/empty.png" style="margin-top:50px;width:250px;margin-bottom: 50px;"></center></div>';

                    $(".pagination-main").hide();
                }
                $("#product-list").html(htmlStr);
            }
        }
    });
}

function showFinal(id, obj = null, type = 1) {
    if (obj && type > 0) {
        var htmlStr = '';
        for (var i in obj) {
            htmlStr += `<li><a class="final-class" id="class_${obj[i].id}" href="javascript:showFinal(${obj[i].id},'',0);">${obj[i].label}</a></li>`
        }
        $("#class_detail").html(htmlStr);
        $(".final-class").click(function () {
            $(".final-class").removeClass("active");
            $(this).addClass("active");
        })
    }
    contractPage(id, 1);
}

function getParams() {
    var params = {};
    var query = location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        params[pair[0]] = decodeURIComponent(pair[1]);
    }
    return params;
}

function getClassData(cid) {
    classId = cid;
    $.ajax({
        url: '/api/search/classData',
        type: 'get',
        data: {cid: cid},
        async: false,
        dataType: 'json',
        success: function (r) {
            $("#class_" + cid).click();
            if (r.data.data.length >= 2 && r.data.class.length > 0) {
                showFinal(cid, r.data.class, 1);
                if (r.data.data.length >= 3) {
                    $("#class_" + r.data.data[r.data.data.length - 2]).click();
                    $("#class_" + r.data.data[r.data.data.length - 1]).addClass("active");
                }
            }

            for (var i in r.data.data) {
                $("#class_" + r.data.data[i]).addClass("active");
            }
        }
    });
}
